<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        <!--
        默认的边框和填充都改为0-- >
        * {
            margin: 0;
            padding: 0;
        }

        .item {
            /*  border-right 表示右边框，param1表示边框的样式， param2 边框粗细
            这样设置后，最后一个多个 竖线 可以用行内样式，设置最后一个元素的 border:none 表示无边框*/
            border-right: solid 1px red;
            /*pading用于把边框拉长*/
            padding: 0 15px;
        }


    </style>
</head>
<body>
<h2>一：img 元素依次从左到右排列的。 设置图片 宽高时，图片会自动缩放，但要注意图片的宽高比例 alt 属性表示图片加载失败时的提示</h2>
<!--width=100% 表示撑满整个窗口-->
<img src="../img/pic1.jpeg">
<a href="https://www.baidu.com" title="baidu" target="_blank">https://www.baidu.com</a>
<hr>


<h2>二：列表</h2>
<!--p标签表示另起一行-->
<p>无序列表type 取值为 disc,circle,square</p>
<ul type="squar">
    <li>11111</li>
    <li>11111</li>
</ul>

<p>有序列表 type 取值为 1，a,A,i,I</p>
<ol type="a">
    <li>22222</li>
    <li>22222</li>
</ol>
<hr>

<del>删除线</del>
<u>下划线</u>
<!--上标线-->
10<sup>2</sup>
<hr>

<h2>表格</h2>
<!--表格 border 表示表格的边框  cellspacing 表示两个单元格之间空白的间隙-->
<table border="1" cellspacing="0">
    <colgroup>
        <!--       col 单标签  span 表示占几列-->
        <col span="2" align="" width="200px">
    </colgroup>
    <tr>
        <!--   width 单元格的宽度    align 单元格里的文字位置  下面这个td的样式可以用col 标签代替，col表示列-->
        <!--        <td width="200px" align="center">11111</td>-->

        <td>11111</td>
        <td>111112222</td>
        <td>111112222</td>
    </tr>
    <tr>
        <td>2222222</td>
        <td>2222222</td>
        <td>2222222</td>
    </tr>
</table>
<hr>

<h2>位置</h2>
<p>标签嵌套 超链接不能嵌套超链接，p标签页不能互相嵌套 h1-h6 也不能互相嵌套</p>
<div style="margin: auto;width: 200px">
    <b>重要新闻</b>
    <p><span style="color: red">text-align:center 让内部元素水平居中</span></p>
    <p><span style="color: red">margin:auto; 让元素本身水平居中</span></p>
</div>


<hr>


<div id="banner">
    <img src="../img/pic1.jpeg" width="50%">
</div>
<!--一个空的div 高度默认为0 宽度默认为100% body 标签 默认 有边距，如果想靠边的 花，设置  body 元素的margin
想增加 下面两行文字的间距 只需设置 div 的高度，让后让文字居中(设置行高 line-height)就行了
text-align:center 水平居中
-->
<div id="nivagation" style="height: 50px;line-height: 40px;text-align: center">撒发射点发射点发</div>
<div id="footer" style="height: 50px;line-height: 40px;text-align: center">xxsdfsadfsadfas</div>


<p>超链接加竖线分割（可以用span | span 元素分割，下面用css 分割，先个每个a 加边框，然后只保留右边框）css 见上面</p>
<a class="item">baidu</a>
<a class="item">tencent</a>
<a class="item" style="border: none">jd</a>

<hr>
<p>css 文本样式</p>
<ul>
    <li style="color:red">颜色样式</li>
    <li style="font-family: 微软雅黑">字体类型</li>
    <li style="font-size: 26px">字体大小</li>
    <li style="font-weight: bold">字体加粗</li>
    <li style="font-style: italic">字体样式：倾斜</li>
    <li style="text-indent: 60px">字体首行缩进</li>
    <li style="text-align: center;color: red">水平对齐方式</li>
    <li style="line-height: 100px;">行高</li>
    <li style="height: 100px;line-height: 100px ;background-color: gray">垂直居中</li>
    <li style="text-decoration: underline">文本修饰</li>
</ul>

<hr>
<p>背景图片默认是以平铺的方式不断重复的，直到填满整个容器 如果不希望背景图平铺，设置 background-repeat:no-repeat
    平常使用背景的时候可以用一张小的图片，然后使用平铺的方式设置整个背景图（平铺后看起来像一张图的）
    background-position 可以设置图片在容器中的为 位置，param1 表示图片水平位置，param2 表示 图片在容器中的垂直
    位置， background-position: right bottom (图片处在 容器的右下方)
</p>
<div style='background-image: url(../img/lbxx.gif);background-repeat: no-repeat;background-position: right bottom;height: 200px;'>
</div>


<hr>
<h2>元素的浮动布局1</h2>
<p>1,容器类的元素，不管大小如何都是独占一行,正常情况下的排列时由上到下的 比如有三个元素，如果把第一个元素 浮动起来了， 其所占的空间就产生了空缺，这时候，后面的两个元素，就自动的往上填补</p>
<p>2.如果被覆盖的元素有文字的话 文字并不会被覆盖，而是会被挤到周围。</p>
<p>3,比如有左中右，三个容器类元素（电商页面布局）即使设置了大小，也没法排列在一行，这时把三个元素浮动起来 然后设置大小 就可以排列在一行了</p>

<p>文字环绕</p>
<div class="green" style="float:left;width: 100px;height: 100px;background-color: green"></div>
<div class="red" style="width: 200px;height: 200px;background-color: red">
    文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕
</div>

<p>横向排版(正常情况下每个div 占一行) 现在每个把他们都改为浮动</p>
<div class="a" style="float:left;width: 200px;height: 200px;background-color: green"></div>
<div class="b" style="float:left;width: 700px;height: 200px;background-color: red"></div>
<div class="c" style="float:left;width: 300px;height: 200px;background-color: blue"></div>

<h2>元素的浮动布局2</h2>
<p>1，按照1的实则，三个容器元素可以排列在一行了，但是，假如在下面再加一个div 这时，上面的三个元素，会遮挡住第四个元素
    这时，我们可以把浮动的三个元素，放到一个不浮动的 div里，不浮动的div 包裹住这三个浮动的div,就不会遮挡住第四个div了
    本列就可以发现上面的三个浮动的div 已经遮挡了这个 文字描述的元素了，文字又被挤出了
</p>
<p> 2，这里父元素要设置高度，普通的元素 子元素可以撑开父元素，但这里由于子元素 是浮动的，并不占据空间，所以没法撑开父元素
    这里实际上还是 遮盖了，只不过遮盖的是父元素的空间
    这里如果不想用设置父元素高的方式 ，还有其他方式 方式一：给父元素加样式 overflow:auto overflow表示溢出的意思，这里表示
    如果超出父元素边界的部分，自动调整父元素的边界，从而来完全包裹子元素 方式2：使用clear:left/right/both clear 表示清楚浮动
    表示不受浮动影响，谁受浮动影响，谁加这个样式，left 表示不受左浮动影响，right 当前元素不受右浮动影响，both 都不受影响</p>
<div style="height: 200px;">
    <div class="a" style="float:left;width: 20%;height: 200px;background-color: green"></div>
    <div class="b" style="float:left;width: 60%;height: 200px;background-color: red"></div>
    <div class="c" style="float:left;width: 20%;height: 200px;background-color: blue"></div>
</div>
<div style="background-color: gray;height: 200px;">aaaaa</div>


<hr>
<h2>浮动元素排列问题，一行排列不下时如何展示 见图片</h2>

<hr>
<h2>右浮动元素的顺序，从右往左一次排列</h2>
<hr>
<h2>浮动元素重叠问题</h2>
<p>1,浮动元素不会覆盖文字内容</p>
<p>2,浮动元素不会覆图片内容（图片本身页属于文本，特色的文字）</p>
<p>3,浮动元素不会覆盖表单内容</p>
<hr>

<h2>间距，排列三张图片，并居中显示</h2>
<!--overflow: auto 父元素自动适应子元素大小 margin: auto 让元素本身居中，但这里div 本身就占据一行，所以
要设置div 的宽度-->
<div style="overflow: auto;margin: auto;width: 800px">
    <div style="width:200px;height: 100px;float:left;margin: 20px;background-image: url(../img/pic1.jpeg)"></div>
    <div style="width:200px;height: 100px;float:left;margin: 20px;background-image: url(../img/pic1.jpeg)"></div>
    <div style="width:200px;height: 100px;float:left;margin: 20px;background-image: url(../img/pic1.jpeg)"></div>
</div>
<hr>
<h2>填充（内边距，也就时padding） 会改变元素的大小 (像这样的分块一般都用div 来分)</h2>
<div style="overflow: auto;margin: auto;width: 900px">
    <div style="border: 5px solid black;width:250px;height: 120px;float:left;margin: 20px;padding: 10px;">
        <img style="width: 200px;height: 100px;margin: 15px;" src="../img/pic1.jpeg">
        测试文字
    </div>
    <div style="border: 5px solid black;width:250px;height: 120px;float:left;margin: 20px;padding: 10px;">
        <img style="width: 200px;height: 100px;margin: 15px;" src="../img/pic1.jpeg">
        测试文字
    </div>
    <div style="border: 5px solid black;width:250px;height: 120px;float:left;margin: 20px;padding: 10px;">
        <img style="width: 200px;height: 100px;margin: 15px;" src="../img/pic1.jpeg">
        测试文字
    </div>
</div>
<hr>
<p>通过设置margin 为负数，可以让子元素从父元素中脱离出来，比如设置 margin-left:-100px,子元素从父元素中脱离出来
形成两个独立的元素</p>
<div style="background-color: red;width: 100px;height: 50px;margin: auto">
    aaa
    <div style="background-color: blue;margin-left: -100px;width50px;height: 50px;"></div>
</div>
<hr>

<p>7，postion 定位 即 相对于其父元素(absolute)的位置(第一有postion 样式的父元素，如果没有，就是相对于body的位置，可以把下面的父元素的
    postion：relative去掉 观察效果,position:absulte,不占据空间了)，和其自身的位置(relative，postion:relative  仍然占据空间)
    下面的例子可以看出，aaaa 绝对定位后，释放了空间，cccc 上移了
</p>
<div style="width: 200px;height: 100px; background-color: darkgrey;position: relative">
    <div style="position: absolute;left: 5px;top: 20px;">aaaaa</div>
    <div>cccc</div>
</div>
<hr>

<p>8,ul ol 去掉前面的序号 通过list-style-type:none,看盒模型 距离左边有40 的padding
li 块级标签，变行级标签 可以设置 float
</p>
<ul style="list-style-type: none">
    <li style="float: left;text-align: center;width: 80px;color: rebeccapurple">新闻</li>
    <li style="float: left;text-align: center;width: 80px;color: rebeccapurple">图片</li>
    <li style="float: left;text-align: center;width: 80px;color: rebeccapurple">音乐</li>
</ul>
<hr style="clear: left">

<p>9,行级标签 是没法设置高度和宽度的，如果想设置的话要变成块级标签  display:block;也可以不设置 成块级标签，设置 span 的内边距padding</p>
<p style="color: red">待办，为啥 最后一个span （设置了pading的） 会遮盖住 hr 标签 </p>
<span style="background-color: red;display: block;width: 200px;height: 50px;">display:block 的 span</span>
<span style="background-color: blue;padding: 20px;">内边距padding的span</span>
<span>默认的span</span>
<hr>

<p>10,超链接的伪类别属性 见顶部的css 样式</p>

<ul class="aclass" style="list-style-type: none">
    <li><a href="https://www.baidu.com" target="_blank">https://www.baidu.com</a></li>
    <li><a href="https://www.baidu.com" target="_blank">https://www.baidu.com</a></li>
    <li><a href="https://www.baidu.com" target="_blank">https://www.baidu.com</a></li>
</ul>
<hr>















<p>个人简历 标准的表格有三个部分 thead,tbody,tfooter</p>

<table border="1px" cellspacing="0">
    <colgroup>
        <col span="6" width="100px">
        <col width="200px">
    </colgroup>
    <tr height="40px">
        <!--        th 相当于加粗居中的td-->
        <th colspan="7">个人</th>

    </tr>
    <tr height="40px">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <!--       其他几行的最后一个td 删掉-->
        <td rowspan="4">照片</td>
    </tr>
    <tr height="40px">
        <td></td>
        <td></td>
        <td></td>
        <td colspan="3">xxxx</td>

    </tr>
    <tr height="40px">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>

    </tr>
    <tr height="40px">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>

    </tr>
    <tr height="40px">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

</body>
</html>